<template>
  <div>
    <el-row>
      <el-col style="margin-top: 30px; position: relative">
        <el-button
          type="primary"
          plain
          style="width: 20%"
          @click="bt_1()"
          :class="{ 'active-button': reply === 1 }"
          >待邮寄</el-button
        >
        <el-button
          type="primary"
          plain
          style="width: 20%"
          @click="bt_2()"
          :class="{ 'active-button': reply === 2 }"
          >已邮寄</el-button
        >
        <el-button
          type="primary"
          plain
          style="width: 20%"
          @click="bt_3()"
          :class="{ 'active-button': reply === 3 }"
          >未邮寄</el-button
        >

        <el-button
          type="primary"
          plain
          style="width: 20%; position: absolute; right: 0"
          class="active-button"
          @click="down"
          >导出</el-button
        >
      </el-col>

      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
          v-if="Data != null"
        >
          <el-table-column
            prop="Name"
            label="申领人"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="CreatedTime"
            label="申领日期"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Phone"
            label="手机号"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Sex"
            label="性别"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Age"
            label="年龄"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Address"
            label="地址"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="reply == 2"
            prop="SendTime"
            label="邮寄时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="reply == 3"
            prop="Remark"
            label="未邮寄原因"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>

          <el-table-column
            fixed="right"
            label="邮寄状态"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                style="color: blue"
                type="primary"
                size="small"
                v-if="scope.row.Send == '待邮寄'"
                @click="
                  dialogFormVisible = true;
                  id = scope.row.Id;
                "
                >待邮寄</el-button
              >
              <el-button
                link
                style="color: red"
                type="primary"
                size="small"
                v-if="scope.row.Send == '未邮寄'"
                >未邮寄</el-button
              >
              <el-button
                link
                style="color: green"
                type="primary"
                size="small"
                v-if="scope.row.Send == '已邮寄'"
                >已邮寄</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <el-dialog
        title="修改邮寄状态"
        v-model="dialogFormVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-select
          v-model="SendType"
          placeholder="邮寄状态"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-if="SendType == '已邮寄'"
          v-model="sendTime"
          type="datetime"
          placeholder="选择邮寄时间"
          style="margin-top: 20px"
          @change="PopChange"
        />
        <el-input
          style="margin-top: 20px"
          v-if="SendType == '未邮寄'"
          placeholder="请填写未邮寄原因"
          v-model="remark"
        ></el-input>
        <div slot="footer" class="dialog-footer" style="margin-top: 10px">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="youji">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import apiService from "@/services/apiService";
import { v4 as uuidv4 } from "uuid";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { base64ToExcelAndDownload } from "../../utils/auth";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Shenling"
});

//表格数据
const Data = ref<any>([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数
const reply = ref<number>(1); //当前显示

//切换按钮
const bt_1 = () => {
  reply.value = 1;
  console.log(reply.value);
  GetList("待邮寄");
};
const bt_2 = () => {
  reply.value = 2;
  console.log(reply.value);
  GetList("已邮寄");
};
const bt_3 = () => {
  reply.value = 3;
  console.log(reply.value);
  GetList("未邮寄");
};
//获取表单数据
const GetList = (type: any) => {
  const params = {
    msgid: "GetFilteredPagedApplyAddresses",
    token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
    seq: uuidv4(),
    body: {
      pageNumber: currentPage.value,
      pageSize: pageSize.value,
      send: type
    }
  };

  apiService
    .post("", params)
    .then((res: any) => {
      // 使用 any 类型断言
      console.log(res.data);
      let arr = res.data.body.Data.ApplyAddresses;
      for (let i = 0; i < arr.length; i++) {
        arr[i].CreatedTime =
          arr[i].CreatedTime.slice(0, 10) + " " + arr[i].CreatedTime.slice(11);

        if (reply.value == 2) {
          arr[i].SendTime =
            arr[i].SendTime.slice(0, 10) + " " + arr[i].SendTime.slice(11);
        }
      }
      Data.value = arr;
      Total.value = res.data.body.Data.TotalRecords;
    })
    .catch(error => {
      console.error("Error fetching data:", error);
    });
};

const dialogFormVisible = ref(false);

const id = ref<any>("");
const SendType = ref<any>("");
const sendTime = ref<any>("");
const remark = ref<any>("");
const options = [
  {
    value: "已邮寄",
    label: "已邮寄"
  },
  {
    value: "未邮寄",
    label: "未邮寄"
  }
];
const youji = () => {
  if (SendType.value == "") {
    ElMessage({
      type: "error",
      message: "请选择邮寄状态"
    });
  } else {
    if (SendType.value == "已邮寄") {
      if (sendTime.value == "") {
        ElMessage({
          type: "error",
          message: "请选择邮寄时间"
        });
      } else {
        const params = {
          msgid: "UpdateSendStatus",
          token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
          seq: uuidv4(),
          body: {
            id: id.value,
            send: "已邮寄",
            sendnum: "",
            sendTime: sendTime.value,
            remark: ""
          }
        };
        apiService.post("", params).then((res: any) => {
          console.log(res);
          if (res.data.code == 200) {
            ElMessage({
              type: "success",
              message: "完成邮寄"
            });
            dialogFormVisible.value = false;
            GetList("待邮寄");
          }
        });
      }
    } else if (SendType.value == "未邮寄") {
      if (remark.value == "") {
        ElMessage({
          type: "error",
          message: "请填写未邮寄原因"
        });
      } else {
        const params = {
          msgid: "UpdateSendStatus",
          token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
          seq: uuidv4(),
          body: {
            id: id.value,
            send: "未邮寄",
            sendnum: "",
            sendTime: "",
            remark: remark.value
          }
        };
        apiService.post("", params).then((res: any) => {
          console.log(res);
          if (res.data.code == 200) {
            ElMessage({
              type: "success",
              message: "状态修改完成"
            });
            dialogFormVisible.value = false;
            GetList("待邮寄");
          }
        });
      }
    }
  }
};
const PopChange = () => {
  if (sendTime.value != null) {
    return;
  } else {
    sendTime.value = "";
  }
};
const down = () => {
  const params = {
    msgid: "ExportShippingInfo",
    token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
    seq: uuidv4(),
    body: {}
  };
  apiService.post("", params).then((res: any) => {
    if (res.data.code == 200) {
      base64ToExcelAndDownload(res.data.body.base64data, res.data.body.name);
      ElMessage({
        type: "success",
        message: "已导出，请查看下载文件"
      });
    }
  });
};

//关闭弹窗
const handleClose = (done: () => void) => {
  SendType.value = "";
  sendTime.value = "";
  remark.value = "";
  done();
};

// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  if (reply.value == 1) {
    GetList("待邮寄");
  } else if (reply.value == 2) {
    GetList("已邮寄");
  } else {
    GetList("未邮寄");
  }
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

onMounted(() => {
  GetList("待邮寄");
});
</script>

<style lang="scss" scoped>
.active-button {
  background-color: #409eff; /* 设置按钮激活时的背景颜色 */
  color: white; /* 设置按钮激活时的文字颜色 */
}
</style>
